<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传照片</title>
</head>
<style>
    #pic{
        width: 30%;
        height: 600px;
        margin: 0 auto;
        border-left: 3px dashed green;
        border-right: 3px dashed green;
    }
    .pic_1{
        width:80%;
        height: 400px;
        margin: 20px 40px 100px 40px;
        background-color: #49afcd;
    }
    button{
        color: green;
        font-size: 15px;
        width: 100px;
        height: 40px;

    }
</style>
<body>
    <div id="pic">
        <div class="pic_1">
            <form action="/Home/User/pic" method="post" enctype="multipart/form-data" class="form-alert">
                <input type="file" name="pic" id="imgfile" size="40" >
                <br><br>
                <button type="submit">点击上传</button>
            </form><br><br>
            <img name="showimg" id="showimg" src="" style="display: none;" alt="预览图片">
        </div>
        <div style="display: none">

        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="/Public/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    function viewmypic(mypic,imgfile){
        if(imgfile.value)
        {
            mypic.src=imgfile.value;
            mypic.style.display = "";
            mypic.border = 1;
        }
    }

//    $(document).on('submit','.form-alert',function(event){  //用户提问
//        event.preventDefault();
//        var data = $("form").serialize();
//		alert(data);
//        $.bc.post($(this).attr('action'),data,function(res){
//
//        });
//        return false;
//    });
    $(document).ready(function(){
        $("button").on('click',function(e){
            e.preventDefault();
//            var data = $("form").serialize();
            var arr = [ "xml", "html", "css", "js" ];
            alert(arr);
            var imgtype = $("#imgfile").val().substring($("#imgfile").val().lastIndexOf('.') + 1);
            if($.inArray(imgtype,arr) == -1)
            {
                e.preventDefault();
                alert("图片格式错误");
            }
            var size = this.file['pic'].size;
            alert(size);
            var url = '/Home/User/pic';
            var data = {'pic':$("#imgfile").val()};
//            alert(data);
            $.post(url,data,function(res){
                if(res.status == 0)
                {
                    alert(res.content);
                }
            });
        });

    });
</script>